<template>
    <el-dialog v-model="visible" title="新增模型" width="600px" class="modelData" >
        <el-form :model="formData" label-width="auto" style="max-width: 600px">
            <el-form-item label="模型名称" prop="model_name">
                <el-input v-model="formData.model_name" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="模型上传" prop="algorithm">
                <van-uploader :after-read="afterRead" style="width: 100%" :accept="formData.model_type == 'THREED' ? '.glb':''">
                    <div class="loadItem" :style="{
                        color: formData.model_file ? '#606266' : '#9ea1a9',
                    }">
                        <div class="loadText">
                            {{ formData.model_file ? formData.model_file : "上传模型文件" }}</div>
                        <el-icon style="margin-right: 15px">
                            <Upload />
                        </el-icon>
                    </div>
                </van-uploader>
            </el-form-item>

            <el-form-item label="模型图片" prop="image_url" class="model_image">
                <van-uploader :after-read="afterReadImage" style="width: 100%;height: 72px;">
                    <div class="loadImage">
                        <div class="loadBtn" v-if="!formData.image_url">
                            <el-icon>
                                <CirclePlus />
                            </el-icon>
                        </div>
                        <div class="loadText">
                            {{ formData.image_url ? formData.image_url : "上传模型图片" }}</div>
                        <!-- <el-image v-else :src="returnFileUrl(formData.image_url)"
                            style="width: 120px; height: 64px;margin-top: 3px;" fit="contain" /> -->
                    </div>
                </van-uploader>
            </el-form-item>
    
            <el-form-item>
                <el-button type="primary" @click="submitForm()">添加</el-button>
                <el-button @click="resetForm()">取消</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import {  ref,watch } from 'vue'
import { uploadFile } from '../api/files'
import { Upload, CirclePlus } from "@element-plus/icons-vue";
import { defineEmits } from 'vue'

const emit = defineEmits(['submit'])

const visible = ref(false)

const formData = ref({
    model_name: '',
    model_file: '',
    image_url: '',
    model_type:'',
});


const open = () => {
    visible.value = true;
}

const submitForm = async () => {
    const data = formData.value

    // 添加 /public/ 前缀
    const processedData = {
        model_name: data.model_name,
        model_file: '/public/' + data.model_file,
        image_url: '/public/' + data.image_url
    }

    emit('submit', processedData)
    visible.value = false
}


const afterRead = (newFile: any) => {
    uploadFile(newFile.file, 'model').then(res => {
        formData.value.model_file = res.data
    })
}

const afterReadImage = (newFile: any) => {
    uploadFile(newFile.file, 'image').then(res => {
        formData.value.image_url = res.data
    })
}
watch(visible, (newValue) => {
    if (!newValue) {
        resetForm()
    }
})

// 重置表单
const resetForm = () => {
    formData.value = {
        model_name: '',
        model_file: '',
        image_url: '',
        model_type:'',
    }
}
defineExpose({open})
</script>

<style lang="less" scoped>


</style>